<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>常用方法</h2>
    <ul>
        <li>A.append(B)：把B追加到A的内部后面。</li>
        <li>A.appendTo(B)：把A追加到B的内部后面。</li>
        <li>A.prepend(B)：把B追加到A的内部前面。</li>
        <li>A.prependTo(B)：把A追加到B的内部前面。</li>
        <li>A.remove()：把A标签删除掉（自杀）。</li>
        <li>A.empty()：把A标签内部清空。相当于DOM对象.innerText = ""</li>
        <li>A.detach()：把A标签删除掉，但是jQuery对象保留。（用得较少）</li>
        <li>A.clone(true|false)：通过A克隆一个新的jQuery对象，新对象与A没有任何关系，true:也克隆事件，false不克隆事件。</li>
    </ul>
    <div>
        姓名：<input type="text" name="name" id="name"><br>
        电话：<input type="tel" name="tel" id="tel"><br>
        <button onclick="handleAppend()">后面插入</button>
        <button onclick="handlePrepend()">前面插入</button>
        <button onclick="handleClone()">克隆元素</button>     
    </div>
    <ul id="ul">

    </ul>
</body>
<script src="../jquery-3.6.0.min.js"></script>
<script>

    // 获取ul
    let $ul = $("#ul");

    function handleDelete() {
        let e = window.event;
        let button = e.currentTarget;
        // 将DOM转为jquery对象，并查找父元素
        // jquery.parent(选择器)：根据选择器查找直接父节点，其中选择器可以不传，那么就是查找父节点，传入选择器更多的是验证父节点是谁
        $(button).parent("li").remove();
    }

    function handleAppend() {
        let li = document.createElement("li");
        let obj = {};
        obj.name = $("#name").val();
        obj.tel = $("#tel").val();
        // jquery.html()将jquery对象内容设置为html字符串
        $(li).html(`<span>姓名：${obj.name}，电话：${obj.tel}</span>`);

        let button = document.createElement("button");
        button.innerText = "删除";
    
        // 绑定事件
        $(button).on("click",handleDelete)

        // li的内部最后添加按钮
        $(li).append(button);

        // 将li追加到ul内部的后面
        $ul.append(li)
    }

    function handlePrepend() {
        let obj = {};
        obj.name = $("#name").val();
        obj.tel = $("#tel").val();

        let str = `<li>姓名：${obj.name}，电话：${obj.tel}</li>`;
        $ul.prepend(str);
    }

    // 克隆ul标签里面的第一个li
    function handleClone() {
        // children: 查找直接子级
        let $li = $ul.children("li").eq(0);
        if ($li == null) {
            return;
        }
        // clone: true表示也克隆事件（默认false）
        let $newLi = $li.clone(true);
        $newLi.appendTo($ul);
    }

</script>
</html>